<template>
  <div class="wrap">
    <div class="wrap-button">
      <a-button style="margin-right: 8px" type="primary" @click="showAddRole">新增</a-button>
      <a-button style="margin-right: 8px" type="primary" @click="showAddRole">导出</a-button>
      <div style="float: right">
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 120px; margin-right: 8px"
          @focus="focus"
          @change="handleChange"
          placeholder="客户"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-select
          ref="select"
          v-model:value="value1"
          style="width: 120px; margin-right: 8px"
          @focus="focus"
          @change="handleChange"
          placeholder="出库类型"
        >
          <a-select-option value="jack">Jack</a-select-option>
          <a-select-option value="lucy">Lucy</a-select-option>
          <a-select-option value="disabled" disabled>Disabled</a-select-option>
          <a-select-option value="Yiminghe">yiminghe</a-select-option>
        </a-select>
        <a-input
          v-model:value="keyword"
          style="width: 180px; margin-right: 8px"
          placeholder="输入单据关键字查询"
          allow-clear
        >
          <template #prefix>
            <SearchOutlined style="color: #666" />
          </template>
        </a-input>

        <a-button type="primary" @click="handleSearch">查询</a-button>
      </div>
    </div>
    <div class="wrap-table">
      <!-- <BaseTitle title="用户列表" /> -->
      <a-table
        :loading="loading"
        :dataSource="data"
        :columns="columns"
        size="middle"
        @change="handleTableChange"
        width="300"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'orderCode'">
            <a>{{ record.orderCode }}</a>
          </template>
          <template v-if="column.key === 'orderType'">
            <a-tag v-if="record.orderType === 0" color="cyan">临时出库</a-tag>
            <a-tag v-else-if="record.orderType === 1" color="warning">永久出库</a-tag>
            <a-tag v-else color="default">默认</a-tag>
          </template>
          <template v-if="column.key === 'orderStatus'">
            <a-tag v-if="record.orderStatus === 0" color="red">未完成</a-tag>
            <a-tag v-else-if="record.orderStatus === 1" color="processing">进行中</a-tag>
            <a-tag v-else-if="record.orderStatus === 2" color="cyan">已完成</a-tag>
            <a-tag v-else color="default">默认</a-tag>
          </template>
          <template v-if="column.key === 'operation'">
            <a-button class="button-interval" type="link" size="small"> 编辑 </a-button>
            <a-button class="button-interval" type="link" size="small"> 完成 </a-button>
            <a-button class="button-interval" type="link" size="small"> 删除 </a-button>
          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, reactive, onMounted } from 'vue'
  import { pageOrderOut } from '/@/api/order'
  import { OrderSO, OrderOutVO } from '/@/api/order/model/orderModel'
  const loading = ref(false)

  const columns = [
    {
      title: '出库单号',
      dataIndex: 'orderCode',
      key: 'assetName',
      align: 'center',
    },
    {
      title: '单据名称',
      dataIndex: 'orderName',
      key: 'epc',
      align: 'center',
    },
    {
      title: '客户名称',
      key: 'clientName',
      dataIndex: 'clientName',
      align: 'center',
    },
    {
      title: '操作人',
      dataIndex: 'operator',
      key: 'operator',
      align: 'center',
    },

    {
      title: '出库原因',
      dataIndex: 'operatorReason',
      key: 'operatorReason',
      align: 'center',
    },
    {
      title: '出库去向',
      dataIndex: 'destination',
      key: 'destination',
      align: 'center',
    },
    {
      title: '出库方式',
      dataIndex: 'orderType',
      key: 'orderType',
      align: 'center',
    },
    {
      title: '出库状态',
      dataIndex: 'orderStatus',
      key: 'orderStatus',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      align: 'center',
    },

    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      with: 180,
    },
  ]

  let data = ref<OrderOutVO[]>([])
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 15,
    size: '',
    showSizeChanger: false,
    showQuickJumper: false,
  })
  const pageParam = computed(() => ({
    query: recordSo,
    current: pagination.value?.current,
    size: pagination.value?.pageSize,
  }))
  let recordSo = reactive<OrderSO>({
    clientName: '',
    orderStatus: -1,
    orderCode: '',
  })

  onMounted(() => {
    list()
  })

  async function list() {
    loading.value = true
    const res = await pageOrderOut(pageParam.value)
    console.log('res', res)
    data.value = res.records
    pagination.value.total = Number(res.total)
    pagination.value.current = Number(res.current)
    loading.value = false
  }

  function handleTableChange(page) {
    pagination.value.current = page.current
    list()
  }
</script>
<style lang="scss" scoped>
  .wrap {
    &-table {
      margin-top: 16px;
    }
  }
</style>
